<script>
import getLoad from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { getLoad, getTimeOut },
  name: "",
  data() {
    return {
      showCont: false,
      showTimeOut: false,
      isChange: false,
      file: "",
      stepIndex: 1,
      navArr: [
        { name: "单页签章", id: 1, icon: "icon-yinzhang" },
        { name: "多页签章", id: 2, icon: "icon-tubiao96" },
        { name: "骑缝签章", id: 3, icon: "icon-ios-ap-need-fill" },
      ],
      navId: 1,
      signNameArr: [],
    };
  },
  props: {},
  setup() {},
  methods: {
    navFn(item) {
      this.navId = item.id;
    },
    getFileFn(e) {
      if (e.target.files.length > 0) {
        this.isChange = true;
        this.file = e.target.files[0];
      }
    },
    nextFn() {
      this.stepIndex = 2;
    },
    addSignName() {
      this.signNameArr.push({
        x: 200,
        y: 400,
      });
    },
  },
  mounted() {},
  created() {
    this.showCont = true;
  },
};
</script>
<template>
  <div class="container">
    <div class="showCont" v-if="showCont && !showTimeOut">
      <div class="stepCont" v-if="stepIndex == 1">
        <div class="upFileCont">
          <div class="iconfont icon-shangchuanwenjian"></div>
          <div>{{ file ? "重新上传" : "请选择文件/图片" }}</div>
          <input type="file" @change="getFileFn($event)" />
        </div>
        <div class="stepInfo" v-if="file">
          <div class="stepTitle">签署文件信息</div>
          <div class="stepDes">
            <div class="stepDesName">文件名称</div>
            <div class="stepDesText">{{ file ? file.name : "未上传文件" }}</div>
          </div>
          <div class="stepDes">
            <div class="stepDesName">文件大小</div>
            <div class="stepDesText">
              {{
                file ? Number(file.size / 1000).toFixed(2) + "KB" : "未上传文件"
              }}
            </div>
          </div>
          <div class="stepDes">
            <div class="stepDesName">发起主体</div>
            <div class="stepDesText">吴欢(个体)</div>
          </div>
        </div>
        <div class="nextBtn" @click="nextFn">立即签署</div>
      </div>
      <div class="stepCont flexCont" v-if="stepIndex == 2">
        <div id="fileShow" class="fileShow">
          <img
            :key="index"
            v-for="(item, index) in 10"
            src="/img/signImg.png"
          />
          <!-- <iframe
            width="100%"
            height="100%"
            frameborder="0"
            :src="'https://view.xdocin.com/view?src=https:\/\/www.whalenav.cn\/uploads\/20250220\/60de3e5d1601372b61812eeafe64a35f.pdf'"
          ></iframe> -->
        </div>
        <div class="underCont">
          <van-floating-bubble
            :key="index"
            v-for="(item, index) in signNameArr"
            :v-model:offset="item"
            axis="xy"
            ><span class="signText">吴欢</span>
          </van-floating-bubble>
          <div class="underHead">
            <div>我的印章</div>
            <div class="creatBtn" @click="addSignName">
              <div class="iconfont icon-tianjiayinzhang"></div>
              <div>创建印章</div>
            </div>
          </div>
          <div class="navCont">
            <div
              @click="navFn(item)"
              :class="navId == item.id ? 'navItem navActive' : 'navItem'"
              :key="index"
              v-for="(item, index) in navArr"
            >
              <div :class="'iconfont ' + item.icon"></div>
              <div>{{ item.name }}</div>
            </div>
          </div>
          <div class="sureBtn">确认签署</div>
        </div>
      </div>
    </div>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<style scoped lang="less">
.container {
  background-color: #fff;
  box-sizing: border-box;
  height: 100vh;
  .showCont {
    height: 100%;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    width: 100%;
    .stepCont {
      width: 100%;
      .upFileCont {
        width: 100%;
        border-radius: 0.75rem;
        background-color: #e8eefd;
        text-align: center;
        border: 1px dashed #ccc;
        padding: 1.5rem 0;
        position: relative;
        .iconfont {
          font-size: 3rem;
          margin-bottom: 1rem;
          color: #666;
        }
        input {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
      .stepInfo {
        width: 100%;
        margin-top: 1.5rem;
        .stepTitle {
          font-size: 0.8rem;
          font-weight: bold;
        }
        .stepDes {
          display: flex;
          justify-content: space-between;
          margin-top: 0.5rem;
        }
      }
      .nextBtn {
        position: fixed;
        width: 92%;
        left: 4%;
        bottom: 0.75rem;
        padding: 0.5rem 0;
        text-align: center;
        border-radius: 1rem;
        // background-color: #5177f6;
        background-image: linear-gradient(to right, #5177f6, #9ab0fa, #5177f6);
        color: #fff;
      }
      .underCont {
        margin-top: 1.5rem;
        .underHead {
          font-size: 0.8rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .creatBtn {
            padding: 0.35rem 1rem;
            border-radius: 1rem;
            font-size: 0.6rem;
            font-weight: normal;
            display: flex;
            align-items: center;
            color: #5177f6;
          }
        }
        .navCont {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.75rem;
          .navItem {
            width: 30%;
            padding: 0.35rem 0;
            background-color: #e4eafa;
            border-radius: 0.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #5177f6;
          }
          .navActive {
            background-color: #5177f6;
            color: #fff;
          }
        }
        .sureBtn {
          width: 100%;
          margin-top: 1rem;
          padding: 0.5rem 0;
          text-align: center;
          border-radius: 0.25rem;
          // background-color: #5177f6;
          background-image: linear-gradient(
            to right,
            #5177f6,
            #9ab0fa,
            #5177f6
          );
          color: #fff;
        }
      }
    }
    .flexCont {
      display: flex;
      flex-direction: column;
      height: 100%;
      .fileShow {
        height: 1rem;
        flex: 1;
        overflow: auto;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
<style>
.van-floating-bubble {
  background: none;
}
.signText {
  color: #000;
}
</style>
